﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo showcases the 64-bit number support of jqxSlider.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxSlider').jqxSlider({
                int64: true,
                width: '80%',
                tooltip: true,
                ticksPosition: 'bottom',
                showMinorTicks: true,
                showTickLabels: true,
                min: '0',
                max: '1000000000000000',
                value: '300000000000000',
                step: '250000000000000',
                ticksFrequency: '250000000000000',
                minorTicksFrequency: '50000000000000'
            });

            $('#jqxSliderRange').jqxSlider({
                int64: true,
                width: '80%',
                rangeSlider: true,
                tooltip: true,
                mode: 'fixed',
                ticksPosition: 'bottom',
                showMinorTicks: true,
                showTickLabels: true,
                min: '0',
                max: '1000000000000000',
                values: ['500000000000000', '750000000000000'],
                step: '100000000000000',
                ticksFrequency: '100000000000000',
                minorTicksFrequency: '50000000000000',
                tickLabelFormatFunction: function (value) {
                    return new $.jqx.math().getDecimalNotation(value, 'exponential');
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxSlider" style="margin: 50px">
    </div>
    <div id="jqxSliderRange" style="margin: 100px 0px 0px 50px;">
    </div>
</body>
</html>
